<template>
    <div v-show="totalPages > 1" class="comp-pager">
        <ul class="pagination">
            <li class="item">
                <a href="javascript:;" class="item-link" v-on:click="selectPage(currentPageNo - 1)" aria-label="Previous">
                    <span aria-hidden="true"><span class="icon-left"></span>&lt;</span>
                </a>
            </li>
            <li class="item" v-for="page in pages" v-bind:class="{ 'active': page.number == currentPageNo, 'disabled': page.disabled }">
                <a href="javascript:;" class="item-link" v-on:click="selectPage(page.number)" v-text="page.text"></a>
            </li>
            <li class="item">
                <a href="javascript:;" class="item-link" v-on:click="selectPage(currentPageNo + 1)" aria-label="Next">
                    <span aria-hidden="true"><span class="icon-right"></span>&gt;</span>
                </a>
            </li>
        </ul>
    </div>
</template>

<script type="text/babel">

    import {PAGE_SIZE} from '../common/constants';

    export default {
        data() {
            return {
                goPageNum: ''
            };
        },
        props: {
            // 当前页码
            pageNo: {
                type: Number,
                default: 1
            },
            // 一页显示多少条
            pageSize: {
                twoWay: true,
                type: Number,
                validator: function (value) {
                    return value > 0
                },
                default: PAGE_SIZE
            },
            // 总页数
            pageNum: {
                type: Number,
                default: 0
            },
            // 总数目
            count: {
                type: Number,
                default: 0
            },
            displayNum: {
                type: Number,
                default: 5
            },
            edgeNum: {
                type: Number,
                default: 2
            },
            onPageChange: {
                type: Function,
                default() {}
            }
        },
        replace: true,
        inherit: false,
        watch: {
            goPageNum(newVal, oldVal) {
                let numberReg = /^\d$/;
                newVal = $.trim(newVal);
                if (newVal !== '') {
                    if (numberReg.test(newVal) !== true) {
                        this.goPageNum = oldVal;
                    } else {
                        if (+newVal > this.pageNum) {
                            this.goPageNum = this.pageNum;
                        }else if(+newVal < 1){
                            this.goPageNum = 1;
                        }
                    }
                }
            }
        },
        computed: {
            currentPageNo() {
                return this.pageNo;
            },
            noPrevious() {
                return this.currentPageNo === 1;
            },
            noNext() {
                return this.currentPageNo === this.totalPages;
            },
            pages() {
                return getPages(this.currentPageNo, this.totalPages, this.edgeNum, this.displayNum);
            },
            totalPages() {
                // 优先使用传递过来的pageNum
                if (this.pageNum !== 0) {
                    return this.pageNum;
                }
                // 如果传递过来的是count, 那么需要计算出对应的totalPages
                return getTotalPages(this.pageSize, this.count);
            },
            startIndex() {
                return Math.min(this.count, (this.currentPageNo - 1) * this.pageSize + 1);
            },
            endIndex() {
                return Math.min(this.count, this.currentPageNo * this.pageSize);
            }
        },
        methods: {
            selectPage(num) {
                if (this.currentPageNo != num && num > 0 && num <= this.totalPages) {
                    this.currentPageNo = num;
                    this.onPageChange(num);
                }
            },
            goPage() {
                var goPageNum = this.goPageNum;

                if (goPageNum > 0 && goPageNum <= this.totalPages) {
                    this.currentPageNo = +goPageNum;
                    this.onPageChange(this.onPageChange);
                }
            }
        }
    };

    function getTotalPages(pageSize, count) {
        var totalPages = pageSize < 1 ? 1 : Math.ceil(count / pageSize);
        return Math.max(totalPages || 0, 1);
    }

    // Create page object used in template
    function makePage(number, text, isActive) {
        return {
            number: number,
            text: text,
            disabled: number === -1
        };
    }

    /**
     * Calculate start and end point of pagination links depending on
     * currentPage and num_display_entries.
     * @return {Array}
     */
    function getInterval(currentPage, pageCount, num_display_entries) {
        //var num_display_entries = 6;
        var ne_half = Math.ceil(num_display_entries / 2);
        var np = pageCount;
        var upper_limit = np - num_display_entries;
        var start = currentPage > ne_half ? Math.max(Math.min(currentPage - ne_half, upper_limit), 0) : 0;
        var end = currentPage > ne_half ? Math.min(currentPage + ne_half, np) : Math.min(num_display_entries, np);
        return [start, end];
    }

    function getPages(currentPage, totalPages, num_edge_entries, num_display_entries) {
        var ret = [];
        //var num_edge_entries = 2;
        var skip_text = '...';
        var np = totalPages;
        var interval = getInterval(currentPage - 1, totalPages, num_display_entries);

        // Generate starting points
        if (interval[0] > 0 && num_edge_entries > 0) {
            var end = Math.min(num_edge_entries, interval[0]);
            for (var i = 0; i < end; i++) {
                var page = makePage(i + 1, i + 1);
                ret.push(page);
            }
            if (num_edge_entries < interval[0]) {
                var page = makePage(-1, skip_text);
                ret.push(page);
            }
        }
        // Generate interval links
        for (var i = interval[0]; i < interval[1]; i++) {
            var page = makePage(i + 1, i + 1);
            ret.push(page);
        }
        // Generate ending points
        if (interval[1] < np && num_edge_entries > 0) {
            if (np - num_edge_entries > interval[1]) {
                var page = makePage(-1, skip_text);
                ret.push(page);
            }
            var begin = Math.max(np - num_edge_entries, interval[1]);
            for (var i = begin; i < np; i++) {
                var page = makePage(i + 1, i + 1);
                ret.push(page);
            }
        }

        return ret;
    }

</script>

<style lang="sass" rel="stylesheet/scss">




    .comp-pager {
        $color-link: #666d71;
        $color-link-hover: #fff;

        margin: 24px 0;
        text-align: right;
        .pagination {
            display: inline-block;
            overflow: hidden;
            >li.item {
                position: relative;
                float: left;
                &:not(:first-child) {
                    margin-left: -1px;
                }
                >a.item-link {
                    display: block;
                    min-width: 20px;
                    height: 20px;
                    line-height: 20px;
                    margin-left: 8px;
                    font-size: 12px;
                    /*background: #fff;*/
                    /*border: 1px #e9e9e9 solid;*/
                    /*border-radius: 5px;*/
                    color: $color-link;
                    text-align: center;
                    transition: color 0s;
                    &:hover {
                        color: #313537;
                        background-color: #d6d6d7;

                    }
                }
                &.active {
                    z-index: 1;
                    pointer-events: none;
                    >a.item-link {
                        background-color: #d6d6d7;
                        color: #333;
                        /*border: 1px #666d71 solid;*/
                        border-radius: 4px;
                        &:hover {
                            cursor: not-allowed;
                        }
                    }
                }
                &.disabled {
                    >a.item-link {
                        cursor: default;
                        border: 0 none;
                        &:hover {
                            color: $color-link;
                        }
                    }
                }
            }
        }
    }

</style>